<template>
    <div class="mui-numbox">
		<button class="mui-btn mui-btn-numbox-minus" type="button" 
        @click.stop="subtract" :disabled="subDis">-</button>
		<input class="mui-input-numbox" type="number" :value="currentCount"/>
		<button class="mui-btn mui-btn-numbox-plus" type="button" 
        @click.stop="plus" :disabled="plusDis">+</button>
	</div>
</template>

<script>
export default {
    props:[
        'initCount', //初始值
        'min',  //下限
        'max',  //上限
        'goodsId',//数字框对应的仓储id
        'isChangeStore',//用来判断是否在修改个数时影响仓储 true/false
    ],
    data(){
        return{
            currentCount:1,
            plusDis:false,
            subDis:true,
        }
    },
    created(){
        this.currentCount = this.initCount
    },
    methods:{
        setDisable(){
            if(this.currentCount>=this.max){
                this.plusDis = true;
                this.subDis = false;
            }else{
                if(this.currentCount <= this.min){
                    this.plusDis = false;
                    this.subDis = true;
                }else{
                    this.plusDis = false;
                    this.subDis = false;
                }
            }
        },
        plus(){
            if(this.currentCount < this.max){
                this.currentCount++;
            }
            //设置btn的disable
            this.setDisable();
        },
        subtract(){
            if(this.currentCount > this.min){
                this.currentCount--;
            }
            this.setDisable();
        }
    },
    //这里使用onchange监听数量变化是不妥的
    //因为w3c规定onchange事件有三个步骤，1。获得焦点2.数据变化3.失去焦点
    //在此处input未获得焦点。
    //正确做法是使用watch来监听currentCount
    watch:{
        'currentCount':function(newValue,oldValue){
            //1.数据发生变化时，立刻调用父组件传递的方法getCount，把currentCount传递过去
            this.$emit("getCount",newValue);
            // console.log(newValue,oldValue);
            //当数据更新时，调用仓储updateStore方法，
            //更新仓储中数据，以此来更新购物车中的总价格
            //在这里传递的对象形如{id:goodsId,count:xxx}
            if(this.isChangeStore){
                var goodsInfo = {id:this.goodsId,count:this.currentCount}
                this.$store.commit("updateStore",goodsInfo);
            }
            
        }
    }
}
</script>

<style lang="less">

</style>